import Taro, { useDidShow } from '@tarojs/taro';
import { ReactNode, useState } from 'react';
import styles from './customTabBar.module.less';
import indexPNG from "./img/index.png";
import indexPNG_hover from "./img/index_hover.png";

import categoryPNG from "./img/category.png";
import category_hoverPNG from "./img/category_hover.png";

import shoppingCartPNG from "./img/shoppingCart.png";
import shoppingCart_hoverPNG from "./img/shoppingCart_hover.png";

import userPNG from "./img/user.png";
import userPNG_hover from "./img/user_hover.png";

import { Image, Text, View } from '@tarojs/components';
import clsx from 'clsx';
import { observer } from 'mobx-react-lite';
import utilsStore from '@/utils/utilsStore';

import designIconSVG from "./img/designIcon.svg";
import designIcon_hoverSVG from "./img/designIcon_hover.svg";

import designPNG from "./img/design.png";
import designPNG_hover from "./img/design_hover.png";

import { get } from 'lodash';

interface Iprops {
    children?: ReactNode
}

const tabs = [
    {
        icon: indexPNG,
        icon_hover: indexPNG_hover,
        text: '首页',
        path: '/pages/Index/Index'
    },
    {
        icon: categoryPNG,
        icon_hover: category_hoverPNG,
        text: '分类',
        path: '/pages/Category/Category'
    },
    {
        icon: shoppingCartPNG,
        icon_hover: shoppingCart_hoverPNG,
        text: '购物车',
        path: '/pages/ShoppingCart/ShoppingCart'
    },
    {
        icon: userPNG,
        icon_hover: userPNG_hover,
        text: '我的',
        path: '/pages/User/User'
    },
];

// 自定义导航栏
const CustomTabBar = observer((props: Iprops) => {
    // const [shoppingCartNumber, setShoppingCartNumber] = useState(0);

    const [path, setPath] = useState("/" + get(Taro.getCurrentPages(), [0, "route"]));
    const [clickCount, setClickCount] = useState(0);
    const [lastClickTime, setLastClickTime] = useState(0);

    useDidShow(() => {
        setPath("/" + get(Taro.getCurrentPages(), [0, "route"]));
    });

    const handleTabClick = (tab) => {
        

        if (tab.text === '我的') {
            const currentTime = Date.now();
            const timeDiff = currentTime - lastClickTime;



            if (timeDiff < 1000) {
                const newCount = clickCount + 1;
                setClickCount(newCount);
            } else {
    
                setClickCount(1);
            }

            setLastClickTime(currentTime);

            // 如果已经在我的页面，不需要跳转
            if (path === tab.path) {
                return;
            }
        }

        // 正常跳转
        Taro.switchTab({ url: tab.path });

        // 重置滚动位置
        if (tab.path === '/pages/Category/Category') {
            // categoryStore.setActiveFirstProductTypeId(undefined);
        }

    };

    // useEffect(() => autorun(() => {
    //     setShoppingCartNumber(shoppingCartStore.cartItems.length);
    // }, { delay: 30 }), []);

    return (
        <View
            className={clsx(styles.customTabBar, "customTabBar", utilsStore.safeAreaBottom > 0 && styles.hasSafeArea
            )}
            style={{
                paddingTop: "20rpx",
                paddingBottom: utilsStore.safeAreaBottom > 0 ? utilsStore.safeAreaBottom : "20rpx"
            }}
        >
            <View className={styles.header} >
                {props.children}
            </View>

            <View className={styles.body} >
                {tabs.map((tab) => {
                    const icon = (path === tab.path) ? tab.icon_hover : tab.icon;
                    return <View
                        key={tab.path}
                        id={tab.text}
                        className={clsx(styles.tab_item, (path === tab.path) ? styles.active : '')}
                        onClick={() => handleTabClick(tab)}
                    >
                        <Image
                            mode="heightFix"
                            src={icon}
                            className={styles.tab_icon}
                        />
                        <View className={styles.tab_text}>{tab.text}</View>
                    </View>
                })}
            </View>
        </View >
    );
});

export default CustomTabBar;